<template>
	<div v-loading="loading">
		<div class="cropper-content">
			<div class="cropper">
				<vueCropper
					ref="cropper"
					:img="img"
					:outputSize="option.size"
					:outputType="option.outputType"
					:info="true"
					:full="option.full"
					:canMove="option.canMove"
					:canMoveBox="option.canMoveBox"
					:original="option.original"
					:autoCrop="option.autoCrop"
					:autoCropWidth="option.autoCropWidth"
					:autoCropHeight="option.autoCropHeight"
					:fixedBox="option.fixedBox"
					@realTime="realTime"
					@imgLoad="imgLoad"
				></vueCropper>
			</div>
			<div class="right">
				<div class="show-preview" :style="previewStyle">
					<div class="avatar" :style="previews.div">
						<img :src="previews.url" :style="previews.img" />
					</div>
				</div>
				<div class="show-preview" :style="previewStyle1">
					<div class="avatar" :style="previews.div">
						<img :src="previews.url" :style="previews.img" />
					</div>
				</div>
				<div class="scope-btn">
					<label class="el-button el-button--primary el-button--small" for="uploads">选择图片</label>
					<input
						type="file"
						id="uploads"
						style="position:absolute; clip:rect(0 0 0 0);"
						accept="image/png, image/jpeg, image/jpg"
						@change="fileChange"
					/>
				</div>
			</div>
		</div>
		<div class="padding-top text-right">
			<el-button size="small" @click="$emit('cancle')">取消</el-button>
			<el-button type="primary" size="small" @click="handleSave">保存</el-button>
		</div>
	</div>
</template>
<script>
  import { VueCropper } from 'vue-cropper'

  export default {
    name: 'ComponentName',
    components: { VueCropper },
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        loading: false,
        img: this.value,
        previews: {},
        previewStyle: {},
        previewStyle1: {},
        option: {
          outputSize: 1, // 剪切后的图片质量（0.1-1）
          info: true, // 裁剪框的大小信息
          full: false, // 输出原图比例截图 props名full
          outputType: 'png',
          original: false,
          canMoveBox: true,
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 200,
          autoCropHeight: 200,
          fixedBox: true, // 固定截图框大小 不允许改变
          canMove: false, // 上传图片是否可以移动
          centerBox: true // 截图框是否被限制在图片里面
        },
        // downImg: "#",
        name: ''
      }
    },
    watch: {
      value(val) {
        this.img = val
      }
    },
    methods: {
      handleSave() {
        this.$refs.cropper.getCropBlob(async data => {
          const file = new File([data], this.name, { type: data.type })
          this.loading = true
          /* 上传方法 */
          const { url } = await Api.Upload(file)
          this.loading = false
          if (!url) return
          this.handleSuccess('图片上传成功')
          this.$emit('cancle')
          this.$emit('input', url)
        })
      },
      // changeScale(num) {
      // 	num = num || 1;
      // 	this.$refs.cropper.changeScale(num);
      // },
      // rotateLeft() {
      // 	this.$refs.cropper.rotateLeft();
      // },
      // rotateRight() {
      // 	this.$refs.cropper.rotateRight();
      // },
      // finish(type) {
      // 	// 输出 //
      // 	var test = window.open("about:blank"); //
      // 	test.document.body.innerHTML = "图片生成中..";
      // 	if (type === "blob") {
      // 		this.$refs.cropper.getCropBlob(data => {
      // 			var img = window.URL.createObjectURL(data);
      // 			this.model = true;
      // 			this.modelSrc = img;
      // 		});
      // 	} else {
      // 		this.$refs.cropper.getCropData(data => {
      // 			this.model = true;
      // 			this.modelSrc = data;
      // 		});
      // 	}
      // },
      // 实时预览函数
      realTime(data) {
        const previews = data
        const h = 0.5
        const h1 = 0.3
        this.previewStyle = {
          width: previews.w + 'px',
          height: previews.h + 'px',
          overflow: 'hidden',
          margin: '0',
          zoom: h
        }
        this.previewStyle1 = {
          width: previews.w + 'px',
          height: previews.h + 'px',
          overflow: 'hidden',
          margin: '0',
          zoom: h1
        }
        this.previews = data
      },
      // down(type) {
      // 	//
      // 	event.preventDefault();
      // 	var aLink = document.createElement("a");
      // 	aLink.download = "author-img";
      // 	// 输出
      // 	if (type === "blob") {
      // 		this.$refs.cropper.getCropBlob(data => {
      // 			console.log(data);
      // 			this.downImg = window.URL.createObjectURL(data); //
      // 			aLink.download = this.downImg;
      // 			console.log(this.downImg);
      // 			aLink.href = window.URL.createObjectURL(data);
      // 			aLink.click();
      // 		});
      // 	} else {
      // 		this.$refs.cropper.getCropData(data => {
      // 			this.downImg = data;
      // 			aLink.href = data;
      // 			aLink.click();
      // 		});
      // 	}
      // },
      fileChange(e) {
        const file = e.target.files[0]
        if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
          // alert("图片类型必须是 jpeg, jpg, png");
          return false
        }
        this.name = file.name
        const reader = new FileReader()
        // eslint-disable-next-line no-shadow
        reader.onload = e => {
          let data
          if (typeof e.target.result === 'object') {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]))
          } else {
            data = e.target.result
          }
          this.img = data
        }
        // 转化为base64
        // reader.readAsDataURL(file)
        // 转化为blob
        reader.readAsArrayBuffer(file)
      },
      imgLoad(msg) {
        console.log(msg)
      }
    }
  }
</script>
<style lang="scss" scoped>
	.cropper-content {
		@include flex;
		.cropper {
			width: 300px;
			height: 300px;
		}
		.right {
			height: 300px;
			width: 150px;
			@include flex(center, space-around);
			flex-direction: column;
			.avatar {
				overflow: hidden;
				border-radius: 50%;
				border: 1px solid #cccccc;
				background: #cccccc;
				flex-shrink: 0;
				&.big {
					width: 100px;
					height: 100px;
					&.img {
						transform: scale(0.5);
					}
				}
			}
		}
	}
</style>
